<template>
	<view id="list">
		<block v-for="(item,index) in data" :key="index">
			<view class="list-box">
				<!-- 加阴影 -->
				<view class="list-box-content" :class="{touch:index==touch}" @tap="clickBox(index)"
					style="position: relative;">
					<view style="width: 140rpx;height: 140rpx;border-radius: 20rpx;overflow: hidden;">
						<u-image shape="square" ref="uImage" :width="160" :height="160" :src="item.image"
							mode="aspectFill">
							<u-loading size="44" mode="flower" slot="loading" v-if="false"></u-loading>
							<view v-if="false" slot="error" style="font-size: 24rpx;">加载失败</view>
						</u-image>
					</view>
					<view class="list-box-content-right">
						<view :style="{color:item.status==0?'blue':item.status==1&&item.isend==0?'green':item.status==2?'red':'#000000'}" class="title" style="display: flex;justify-content: space-between;align-items: center;">
							{{item.title}}
							<view style="font-size: 32rpx;">{{item.createtime}}</view>
						</view>
						<view class="detail">
							{{item.detail}}
						</view>
					</view>
					<view v-if="nowStatus!=null&&touch==index" style="display: flex;justify-content: center;align-items: center;flex-wrap: wrap;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);border-radius: 20rpx;">
						<u-button v-if="nowStatus==1||nowStatus==2" style="font-size: 32rpx;" @click="toCaoZuo(1,item)" shape="circle" size="mini" :ripple="true" type="success">修改活动</u-button>
						<u-button v-if="nowStatus==1||nowStatus==2" style="font-size: 32rpx;" @click="toCaoZuo(2,item)" shape="circle" size="mini" :ripple="true" type="error">撤销活动到审核失败</u-button>
						<u-button v-if="nowStatus==4" style="font-size: 32rpx;" @click="toCaoZuo(4,item)" shape="circle" size="mini" :ripple="true" type="error">删除活动</u-button>
						<u-button v-if="nowStatus==4" style="font-size: 32rpx;" @click="toCaoZuo(5,item)" shape="circle" size="mini" :ripple="true" type="success">重新申请活动</u-button>
						<u-button style="font-size: 32rpx;" @click="toSeeActivity(item)" shape="circle" size="mini" :ripple="true" type="warning">查看活动内容</u-button>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		// nowStatus:  1：正在进行，2：待审核，3：已结束，4：审核失败
		props: ['data','nowStatus'],
		data() {
			return {
				touch: -1
			}
		},
		methods: {
			toSeeActivity(item) {
				this.touch=-1
				uni.request({
					url: this.url.club.info+'/'+item.clubId, 
					method:'GET',
					header: {},
					success: (res) => {
						console.log(res.data.club)
						var club = res.data.club;
						this.touch = -1,
						uni.navigateTo({
						    url: '/pages/activity/activity-details?activity='+encodeURIComponent(JSON.stringify(item))+"&club="+encodeURIComponent(JSON.stringify(club))
						});
					},
					fail:(res)=>{
						console.log(res)
					}
				});
			},
			clickBox(index){
				if(index==this.touch){
					this.touch=-1;
				}else{
					this.touch = index
				}
			},
			toCaoZuo(index,item){
				//1：修改活动
				//2：撤销活动到审核失败
				//3：删除活动
				//4：重新申请活动
				switch(index){
					case 1:
						//把对象、操作，给父组件
						this.$emit("toUpdate",item)
						// uni.navigateTo({
						// 	url: '/pages/mine/my-club-manage/my-club-manage-info/add-activity/add-activity?caozuo=1&nowActivity=' + encodeURIComponent(JSON.stringify(item))
						// });
						this.touch= -1
						break;
					case 2:
						//撤销活动到审核失败
						item.status = 2
						console.log(item)
						this.submitUpdate(item)
						this.touch= -1
						break;
					case 3:
						break;
					case 4:
						//删除活动
						this.delete(item)
						this.touch= -1
						break;
					case 5:
						//重新申请活动
						item.status = 0
						console.log(item)
						this.submitUpdate(item)
						this.touch= -1
						break;
					default:
						this.touch= -1
						console.log("代码错了")
					
				}
			},
			submitUpdate(item){
				uni.request({
					url: this.url.movement.saveMovement,
					method: 'POST',
					data: JSON.stringify(item),
					header: {
						"content-type": "application/json;charset=UTF-8"
					},
					success: (res) => {
						this.updateOk()
					},
					fail: (res) => {
						console.log("失败！")
					}
				});
			},
			delete(item){
				console.log(this.url.movement.deleteById+"/"+item.id)
				uni.request({
					url: this.url.movement.deleteById+"/"+item.id,
					method: 'POST',
					success: (res) => {
						this.updateOk()
					},
					fail: (res) => {
						console.log("失败！")
					}
				});
			},
			updateOk() {
				this.$emit("updateOk");
			},
		}
	}
</script>

<style>
	#list {
		padding-bottom: 20rpx;
	}

	.list-box {
		height: 180rpx;
		width: 100%;
		padding: 20rpx 20rpx 0 20rpx;
		
	}

	.list-box-content {
		display: flex;
		padding: 10rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		justify-content: center;
		align-items: center;
		transition: all .25s linear;
	}

	.touch {
		background-color: #e4e7ed;
	}

	.list-box-content-right {
		margin: 10rpx 10rpx 0 20rpx;
		width: calc(100% - 200rpx);
	}

	.title {
		font-size: 36rpx;
		font-weight: 800;
		margin-bottom: 10rpx;
		overflow: hidden;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.detail {
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		color: #606266;
	}
</style>
